<template>
  <div class="form-views" v-loading="isViewLoading" element-loading-text="数据加载中...">
    <template v-if="contentData.length">
      <div class="form-views__item" v-for="item in contentData">
        <h3>{{ formNameRender(item).value }}</h3>
        <FormRender :forms="renderFormsData(item, true).value" v-model="item.data" />
      </div>
    </template>
    <template v-else>
      <el-empty />
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
import FormRender from "@/components/customComponents/formRender.vue";
import { getStageView as stageView } from "@/apis/clientManager";
import useComputedParams from "@/hooks/useComputedParams";
import { parseOrDefault } from "@/utils";

const props = defineProps({
  customerId: {
    type: String,
    default: ""
  }
});

const isViewLoading = ref(false);
const contentData = ref([]);

const formNameRender = useComputedParams(item => {
  return item?.processModel?.formName || "";
});
const renderFormsData = useComputedParams((formItems, isDisable) => {
  if (formItems) {
    const itemsData = parseOrDefault(formItems.processModel?.formItems, []);
    if (isDisable) {
      return itemsData.map(item => {
        item.props.disabled = true;
        return item;
      });
    }
    return itemsData;
  }
  return [];
});

const getStageView = async () => {
  try {
    isViewLoading.value = true;
    const { data = [] } = await stageView(props.customerId);
    contentData.value = data;
    isViewLoading.value = false;
  } catch (err) {
    isViewLoading.value = false;
  }
};
getStageView();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.form-views {
  @include mixin.flex-overflow;
  position: relative;
  &__item {
    @include mixin.flex-column;
    @include mixin.flex-center;
    background-color: #f6f8fa;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    & + .form-views__item {
      margin-top: 20px;
    }
  }
}
:deep(.el-form) {
  width: 60%;
}
:deep(.form-item-el) {
  width: 100%;
}
</style>
